<script setup>
import GoodsItem from '@/components/GoodsItem.vue'
import { useBanner } from './composables/useBanner'
import { useCategory } from './composables/useCategory'
import { ref } from 'vue'

const { categoryData } = useCategory()
const { bannerList } = useBanner()

// 1. 存储当前点击的子分类ID（用于高亮定位目标，可选）
const activeSubCategoryId = ref('')

// 2. 锚点定位函数：根据子分类ID，滚动到对应商品区块
const scrollToSubCategory = (subId) => {
  // 更新当前激活的子分类ID（用于高亮，可选）
  activeSubCategoryId.value = subId
  // 找到对应子分类商品区块的DOM元素（ID格式：sub-goods-${subId}）
  const targetElement = document.getElementById(`sub-goods-${subId}`)
  if (targetElement) {
    // 平滑滚动到目标元素（距离顶部20px，避免被导航栏遮挡）
    targetElement.scrollIntoView({
      behavior: 'smooth',
      block: 'start',
      inline: 'nearest'
    })
  }
}
</script>

<template>
  <div class="top-category">
    <div class="container m-top-20">
      <!-- 面包屑 -->
      <div class="bread-container">
        <el-breadcrumb separator=">">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>{{ categoryData.name }}</el-breadcrumb-item>
        </el-breadcrumb>
      </div>

      <!-- 轮播图 -->
      <div class="home-banner">
        <el-carousel height="500px">
          <el-carousel-item v-for="item in bannerList" :key="item.id">
            <img :src="item.imgUrl" alt="" />
          </el-carousel-item>
        </el-carousel>
      </div>

      <!-- 一级分类推荐商品 -->
      <div class="ref-goods" v-if="categoryData.topCategoryGoods?.length > 0">
        <div class="head">
          <h3>- {{ categoryData.name }} 推荐商品 -</h3>
        </div>
        <div class="body">
          <GoodsItem
            v-for="good in categoryData.topCategoryGoods"
            :good="good"
            :key="good.id"
          />
        </div>
      </div>

      <!-- 全部分类（点击子分类触发锚点定位，不跳转） -->
      <div class="sub-list">
        <h3>全部分类</h3>
        <ul>
          <li
            v-for="sub in categoryData.children"
            :key="sub.id"
          @click="scrollToSubCategory(sub.id)"
          :class="{ 'active-sub': activeSubCategoryId === sub.id }"
          >
          <img :src="sub.picture" :alt="sub.name" />
          <p>{{ sub.name }}</p>
          </li>
        </ul>
      </div>

      <!-- 子分类商品区块：给每个区块添加唯一ID，用于锚点定位 -->
      <div
        class="ref-goods"
        v-for="sub in categoryData.children"
        :key="sub.id"
      :id="`sub-goods-${sub.id}`"
      :class="{ 'active-sub-goods': activeSubCategoryId === sub.id }"
      >
      <div class="head">
        <h3>- {{ sub.name }} -</h3>
      </div>
      <div class="body">
        <!-- 无商品时显示提示（优化体验） -->
        <div v-if="!sub.goods || sub.goods.length === 0" class="no-goods">
          暂无该子分类商品~
        </div>
        <GoodsItem
          v-else
          v-for="good in sub.goods"
          :good="good"
          :key="good.id"
        />
      </div>
    </div>
  </div>
  </div>
</template>

<style scoped lang="scss">
// 引入全局变量（确保$xtxColor已定义，若未定义可直接替换为具体颜色值）


.top-category {
  h3 {
    font-size: 28px;
    color: #666;
    font-weight: normal;
    text-align: center;
    line-height: 100px;
  }

  // 全部分类样式
  .sub-list {
    margin-top: 20px;
    background-color: #fff;
    padding: 20px 0; // 增加内边距，优化点击区域

    ul {
      display: flex;
      padding: 0 32px;
      flex-wrap: wrap;
      gap: 10px; // 增加子分类间距，避免拥挤

      li {
        width: 168px;
        height: 160px;
        cursor: pointer; // 鼠标 hover 显示手型，提示可点击
        transition: all 0.3s; // 过渡效果，优化交互体验

        // 子分类图片+文字样式
        img {
          width: 100px;
          height: 100px;
          margin: 0 auto; // 图片居中
          display: block; // 清除inline默认空隙
        }
        p {
          line-height: 40px;
          margin: 0; // 清除默认margin
        }

        // 鼠标 hover 样式
        &:hover {
          color: #1db3c7; // 文字变色，提示可点击
          transform: scale(1.05); // 轻微放大，增强交互反馈
        }

        // 当前激活的子分类高亮样式（可选）
        &.active-sub {
          color: #1dc779;
          border: 1px solid #1dc779; // 激活时加边框，突出显示
          border-radius: 8px;
          padding: 5px 0; // 配合边框调整内边距
        }
      }
    }
  }

  // 商品列表区块样式
  .ref-goods {
    background-color: #fff;
    margin-top: 20px;
    position: relative;
    padding: 20px 0; // 增加内边距，优化显示

    // 当前激活的子分类商品区块高亮样式（可选）
    &.active-sub-goods {
      box-shadow: 0 0 15px rgba(0, 0, 0, 0.08); // 阴影高亮，提示当前定位区域
      border-radius: 8px;
    }

    .head {
      .xtx-more {
        position: absolute;
        top: 20px;
        right: 20px;
        color: #cccccc;
        cursor: pointer;
      }
      .tag {
        text-align: center;
        color: #999;
        font-size: 20px;
        position: relative;
        top: -20px;
      }
    }

    .body {
      display: flex;
      justify-content: space-around;
      padding: 0 40px 30px;
      flex-wrap: wrap; // 商品数量多时自动换行
      gap: 20px; // 商品间距，避免拥挤

      // 无商品提示样式
      .no-goods {
        width: 100%;
        text-align: center;
        padding: 50px 0;
        color: #999;
        font-size: 16px;
      }
    }
  }

  // 面包屑样式
  .bread-container {
    padding: 25px 0;
    color: #666;
  }

  // 轮播图样式
  .home-banner {
    width: 1240px;
    height: 500px;
    margin: 0 auto;

    img {
      width: 100%;
      height: 100%;
      object-fit: cover; // 图片自适应，避免拉伸变形
    }
  }
}
</style>